<template>
  <div>
    <div class="header">实验室管理模块 >> 新增实验室</div>
    <el-row>
      <el-col :span="4"></el-col>
      <el-col :span="16">
        <div class="form">
          <div class="title">新增实验室</div>
          *实验室号:
          <el-input
            class="input"
            v-model="laboratoryRef.name"
            placeholder="请输入实验室号"
          ></el-input>
          <br />
          <br />
          *实验室人数(最大70人)：
          <el-input-number
            v-model="laboratoryRef.number"
            :min="1"
            :max="70"
            label="描述文字"
          ></el-input-number>
          <br />
          <br />
          描述信息:
          <br />
          <el-input
            v-model="laboratoryRef.description"
            type="textarea"
            :rows="3"
            placeholder="请输入描述信息"
          ></el-input>
          <br />
          <br />
          <div class="btn-container">
            <el-button
              type="primary"
              round
              class="btn"
              @click="addLaboratory"
              :disabled="disabled"
            >
              确认新增
            </el-button>
          </div>
        </div>
      </el-col>
      <el-col :span="4"></el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { Laboratory } from "@/datasource/Type";
import { useStore } from "vuex";
import { defineComponent, ref, watch } from "vue";
import { State } from "@/store";
import { ADD_LABORATORY } from "@/store/VuexTypes";

export default defineComponent({
  setup() {
    const laboratory: Laboratory = {
      name: "",
      number: 50,
      description: "",
    };
    const laboratoryRef = ref<Laboratory>(laboratory);
    const disabled = ref(true);
    const store = useStore<State>();
    //const teacher_userName = computed(() => store.state.teacher_userName);
    //const teacher_password = computed(() => store.state.teacher_password);
    const addLaboratory = () => {
      store.dispatch(ADD_LABORATORY, {
        name: laboratoryRef.value.name,
        number: laboratoryRef.value.number,
        description: laboratoryRef.value.description,
      });
    };
    watch(laboratoryRef.value, () => {
      if (laboratoryRef.value.name) {
        if (laboratoryRef.value.name.trim().length > 0) {
          disabled.value = false;
        } else {
          disabled.value = true;
        }
      } else {
        disabled.value = true;
      }
    });
    return {
      laboratoryRef,
      addLaboratory,
      disabled,
    };
  },
});
</script>

<style scoped>
.header {
  width: 90%;
  padding: 5px 5px 10px;
  border-bottom: 1px solid #ccc;
  font-size: 12px;
  color: grey;
  margin-bottom: 20px;
}
.title {
  margin: 10px auto 30px;
  text-align: center;
  font-size: 20px;
  font-weight: 900;
}
.form {
  padding: 50px 100px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.input {
  width: 300px;
}
.tips {
  color: #ccc;
  font-size: 14px;
}
.btn-container {
  display: flex;
  justify-content: center;
}
.btn {
  width: 200px;
}
</style>
